<div id = "form-content"  class="frmcontent">
    <div class="ti-tabs">
        <ul class="idTabs">
            <li><a class="selected" id="Tab01" title="DANH SÁCH VĂN BẢN DỰ THẢO" href="#Tab-01">DANH SÁCH VĂN BẢN</a></li>
            <li><a class="" id="Tab02" title="CẬP NHẬT VĂN BẢN DỰ THẢO" href="#Tab-02">GÓP Ý DỰ THẢO</a></li>
        </ul> 
        <div id="Tab-01" class="content" style="display: none;">
            <form>
                <div id="dsplist"></div>
                <div>
                    <div class="button-left">
                        <input type="button" id="refresh" name="refresh" value="Tìm kiếm" />
                    </div>
                    <div class="button-right">
						<input type="button" id="processrow" name="processrow" value="Góp ý dự thảo" />
                    </div>
                </div>
                <div id="jqxWidget">
                    <div id="jqxgrid"></div>
                </div>
            </form>
        </div>
        <div id="Tab-02" class="content" style="display: none;">
            <form>
                Màn hình sửa
            </form>
        </div>  
    </div>
</div>

<div id='ListMenu'>
    <ul>
        <li id="mn-add">Thêm mới</li>
        <li id="mn-edit">Sửa row đã chọn</li>
        <li id="mn-delete">Xóa row đã chọn</li>
    </ul>
</div>
<script type="text/javascript">
    var dSend = new Module_handling({module: 'module', controller: 'handling'}); dSend.initialize();
    var objGrid = $('#jqxgrid');
    $(function(){
        $(".idTabs").idTabs();
        // prepare the data
        var theme = 'energyblue';
        $('#listBoxgridpagerlistjqxgrid').remove();
        var source ={
              datatype: "json",
              datafields: [
                {name: 'SendID', type: 'string'},
				{name: 'DraffDate', type: 'string'},
                {name: 'DocType', type: 'string'},
                {name: 'Subject', type: 'string'},
                {name: 'ApprovedName', type: 'string'},
				{name: 'ReceivedInfo', type: 'string'},
              ],
              url: baseUrl + '/module/handling/data',
              // id: 'ListtypeID',
              // root: 'Rows',
              cache: false,
              filter: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'filter');
              },
              sort: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'sort');
              },
              root: 'Rows',
              beforeprocessing: function(data){
                source.totalrecords = data[0].TotalRows;
              },
              deleterow: function(rowid, commit) {
                commit(true);
              }
        };
        var dataadapter = new $.jqx.dataAdapter(source, {
              loadError: function(xhr, status, error){
                  alert(error);
              }
            }
        );
        $(objGrid).on('bindingcomplete', function(event) {
            $(this).jqxGrid('localizestrings', dLayout._CONST.localizationobj);
            $(objGrid).jqxGrid("clearselection");
			var ajaxurl = baseUrl + '/ajax/openfile/';
			setAttachEven(objGrid,ajaxurl);
          }).on("pagesizechanged", function (event){
            // var args = event.args; 
            // var pagenum = args.pagenum;
            // var oldpagesize = args.oldpagesize;
            // var pagesize = args.pagesize;
        });   
        $(objGrid).on('rowclick', function(event) {
            if (event.args.rightclick) {
            $(objGrid).jqxGrid('selectrow', event.args.rowindex);
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                    return false;
            }
        });
        // initialize jqxGrid
        $(objGrid).jqxGrid({
            source: dataadapter,
            theme: theme,
            filterable: true,
            showfilterrow: true,
            sortable: true,
            virtualmode: true,
            pagermode: "default",
            pagesizeoptions: ['15', '30', '50'],
            pageable: true,
            width: '100%',
            height: '425',
            autorowheight:true,
            autoheight: true,
            ready: function(){
            },
            rendergridrows: function(obj){
              return obj.data;
            },
            pagesize: 15,
            enablebrowserselection: true,
            selectionmode: 'multiplerowsextended',
            altrows: true,
            columns: [
                      {text: 'SendID', datafield: 'SendID', width: 10, hidden: true, viewable: true, editrules: {edithidden: true}},
					  {text: 'Ngày dự thảo', datafield: 'DraffDate', width: '10%',cellsalign: 'center'},
                      {text: 'Loại văn bản', datafield: 'DocType', width: '10%',cellsalign: 'center'},
                      {text: 'Trích yếu', datafield: 'Subject', width: '40%', cellsalign: 'left'},
                      {text: 'Người ký', datafield: 'ApprovedName', width: '15%', cellsalign: 'center'},
					  {text: 'Nơi nhận', datafield: 'ReceivedInfo', width: '25%', cellsalign: 'left'}
                    ]
            });
			// create context menu
			// $('#menuWrapperListMenu').remove(); 
			$('.jqx-menu-wrapper').remove();
			// jqx-menu-wrapper
			var contextMenu = $("#ListMenu").jqxMenu({width: 200, height: 'auto', autoOpenPopup: false, mode: 'popup'});
			$(objGrid).on('contextmenu', function() {
				  return false;
			});
			// handle context menu clicks.
			$("#ListMenu").on('itemclick', function(event) {
				var args = event.args;
				var rowindex = $(objGrid).jqxGrid('getselectedrowindex');
				switch($.trim($(args).attr('id'))){
				  case 'mn-add':
					$('#addrow').trigger('click');
					break;
				  case 'mn-edit':
					$(objGrid).jqxGrid('selectrow', rowindex);
					$('#editrow').trigger('click');
					break;
				  case 'mn-delete':
					var rowid = $(objGrid).jqxGrid('getrowid', rowindex);
					var ListtypeID = dSend.obGridView.jqxGrid('getrowdata', rowindex).ListtypeID;
					$.post(dSend.urlPath + '/delete', {ListtypeIDList: ListtypeID}, function(data) {
						   dSend.obGridView.jqxGrid('deleterow', rowid);
					});
					break;
				  case 'mn-cache':
					$('#cachelisttype').trigger('click');
					break;
				}        
			});
	});
</script>
